<template>
  <div class="createPage">
    <!-- 顶部按钮 -->
    <div class="topBtn">
      <!-- <div class="reback">
        <el-button type="primary" size="mini" round @click="rebackBtn">返回</el-button>
      </div> -->
      <div class="save">
        <el-button type="primary" size="mini" round @click="saveData">保存</el-button>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="template">
      <!-- 左边 -->
      <div class="left">
        <el-tabs v-model="modelsName">
          <el-tab-pane label="模板列表" name="first">
            <draggable class="widgetList" v-model="modelList" :options="optionsLeft" :clone="cloneDog">
              <div class="modelItem" v-for="(item, index) in modelList" :key="'m' + index">
                <div class="itemBox">
                  <img :src="require('@/assets/icon/' + item.icon)" />
                  <div class="name">{{ item.label }}</div>
                </div>
              </div>
              <div v-if="modelList.length <= 0" class="noModelList">暂无可用模板</div>
            </draggable>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间 -->
      <div class="center">
        <!-- 页面信息 -->
        <div class="navInfo pointer" @click="isShowInfo">
          <span class="title">{{ detailInfo.detailName }}</span>
        </div>
        <!-- 楼层列表 -->
        <div class="panle"
          :style="bgImg !== '' ? { background: 'url(' + bgImg + ')', backgroundSize: 'cover', backgroundPosition: 'center center' } : ''"
          @click="defaultNull">
          <Draggable class="view" :options="optionsRight" :list="waterfallList">
            <!-- 楼层 -->
            <div class="item" v-for="(items, index) in waterfallList" :data-idx="index" :key="index"
              :class="{ 'border': modelClass == 'a' + index }" @click.stop="selectType(items, 'a' + index)">
              <!-- 模板 -->
              <div :style="{
                padding: `10px`,
                width: `${items.style.w < 10 ? 10 : parseInt(items.style.w / 4 * 3)}px`,
                height: `${items.style.h < 10 ? 10 : parseInt(items.style.h / 4 * 3)}px`
              }">
                <WidgetsListAll :com="items.com" :widgetData="items" :comClass="comClass"
                  @detailRecomm="getDetailRecomm(arguments, items)"
                  @deleteRecommItem="deleteRecommItem(arguments, items)">
                </WidgetsListAll>
              </div>
              <!-- delete -->
              <i @click.stop="deleteFloorItem(items, index)" class="el-icon-error"></i>
            </div>
          </Draggable>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 详情信息 -->
        <DetailInfo v-if="isDetailInfo" :modelData="detailInfo" @toImage="initScreenShort"></DetailInfo>
        <!-- 楼层信息 -->
        <WidgetAttrList v-if="isFloorInfo" :comData="propsData" :disabledType="disabledType" @AddItem="AddItem"
          @AddItemPoster="AddItemPoster">
        </WidgetAttrList>
        <!-- 其他配置信息 -->
        <el-tabs v-if="isRight" v-model="activeName2">
          <el-tab-pane label="位置信息配置" name="first">
            <PositionInfo ref="basic" :siteId="siteId" :positionInfo="positionInfo" :disabledType="disabledType">
            </PositionInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// 插件
import Draggable from "vuedraggable";
// 组件
import WidgetsListAll from '@/components/singlePage/model/widgetsListAll2.vue'; //组件列表
import WidgetAttrList from '@/components/singlePage/model/widgetAttrList2.vue'; //组件属性列表
// 组件属性
import DetailInfo from '@/components/singlePage/modelCommon/detailInfo.vue'; //模板信息
import PositionInfo from '@/components/singlePage/modelCommon/positionInfo.vue'; //位置信息配置
import { DETAIL_LIST_WIDGET } from '@/commont/constants/otherConfig.js'; // 静态配置
// 随机数id
import { toHex, randNum4 } from '@/commont/constants/unionCode.js';
let idx = 1;//焦点位置排序
let imgURL = require('@/assets/img/r-1.jpg');
export default {
  components: { Draggable, WidgetsListAll, WidgetAttrList, DetailInfo, PositionInfo, },
  props: {},
  data() {
    return {
      /************ 左边模板列表 ************/
      modelsName: "first",
      modelList: DETAIL_LIST_WIDGET,
      /************ 中间操作面板 ************/
      bgImg: require('../../assets/modelBg.png'),//背景图
      detailInfo: {//详情页列表信息
        detailName: '',
        modelType: '',
        modelBuss: '',
        modelPosi: 2,
        modelSign: '',
        modelSignAdd: '',
        viewImg: '',
        modelDetails: ''
      },
      waterfallList: [],//详情页列表
      modelClass: null,//点击模板时的样式
      comClass: null,//点击组件时的样式
      /************ 右边模板属性 ************/
      isDetailInfo: true,
      isFloorInfo: false,
      isMorebtn: false,
      isRight: false,
      activeName2: "first",
      positionInfo: {},//位置信息
      siteId: '',//位置id
      disabledType: false, //显示类型

    }
  },
  computed: {
    optionsLeft() {
      return {
        animation: 150,
        group: {
          name: "shared",
          pull: 'clone',
          put: false
        },
        sort: false,
      }
    },
    optionsRight() {
      return {
        animation: 150,
        group: 'shared',
      }
    }
  },
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    /*********** 顶部 *************/
    // 返回
    rebackBtn() {
      this.$router.push('');
    },
    // 保存
    saveData() {
      console.log('111', this.waterfallList);
    },

    /*********** 左侧 *************/
    // 生成楼层Id
    getFloorIdNum() {
      return toHex(new Date().getTime()) + '0' + randNum4().toLocaleUpperCase();
    },
    // 创建楼层列表
    cloneDog(item) {
      if (item.type == 'detailBox') {//影片详情
        item.default.detail = {
          logo: require('@/assets/images/img-1.png'),
          video: require('@/assets/img/1.jpg'),
          title: '舍我其谁',
          score: '8.1',
          corporate: '天翼视讯传媒有限公司提供',
          year: '2021',
          are: '中国大陆',
          total: '41',
          director: '鞠觉亮',
          actor: '李兰迪，牛骏峰，韩玖诺',
          introduction: '（内容来源于华数）天才青年围棋手胜景初，黑马姿态一战成名，轰动围棋界。从不接受任何采访的他成为了众多媒体争相报道的对象。实习记者程了帮盛景初解围，却被误会为他的女朋友，两人假戏真做等候收到i的就哦啊收到都好都好是等哈收到都好都好的话大撒大撒大大飒飒大苏打大苏打大大是发售公告发布',
        };
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value: item.default.value,
        })
      }
      else if (item.type == 'textposter') {//文字海报
        item.default.value = [{ name: "", index: idx++, url: imgURL }]
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value: item.default.value,
        })
      }
      else if (item.type == 'poster') {//普通海报
        item.default.value = [
          { name: "", index: idx++, url: imgURL },
        ]
        this.waterfallList.push({
          type: item.type,
          label: item.label,
          com: item.component,
          modularName: "",
          modularId: "",//楼层id
          style: {
            w: item.default.w,
            h: item.default.h,
            h0: item.default.h0,
          },
          detail: item.default.detail,
          isShow: item.default.isShow,
          value: item.default.value,
        })
      }
    },

    /*********** 中间 *************/
    // 取消默认选中
    defaultNull() {
      this.modelClass = null;
      this.comClass = null;
    },
    // 展示页面信息
    isShowInfo() {
      this.isDetailInfo = true;
      this.isFloorInfo = false;
      this.isMorebtn = false;
      this.isRight = false;
    },
    // 设置楼层信息
    selectType(item, index) {
      this.propsData = item;
      console.log('小组件属性值', this.propsData);
      this.modelClass = index;//楼层选中样式
      this.comClass = null;//组件选中样式
      this.isDetailInfo = false;
      this.isRight = false;
      this.isFloorInfo = true;
      this.$nextTick(() => this.isFloorInfo = true);
    },
    // 影片信息添加推荐位
    AddItem(data) {
      console.log('推荐位：', data);
      data.push({ name: "", index: idx++ });
    },
    // 添加海报位
    AddItemPoster(data) {
      console.log('海报位：', data);
      data.push({ name: "", index: idx++, url: imgURL })
    },
    // 配置组件
    getDetailRecomm(data, items) {
      data[0].preventDefault();//阻止默认事件
      data[0].stopPropagation();//阻止事件冒泡
      console.log('推荐位数据：', data, items);
      this.comClass = data[3];//组件选中样式
      this.isDetailInfo = false;
      this.isFloorInfo = false;
      this.isRight = true;
      // 查询位置信息
      this.positionInfo = {
        name: '',
        siteId: this.getFloorIdNum()
      }
    },
    // 删除组件
    deleteRecommItem(data, items) {
      data[0].preventDefault();//阻止默认事件
      data[0].stopPropagation();//阻止事件冒泡
      console.log('删除推荐位数据：', data, items);
      data[1].value.splice(data[3], 1);
      this.comClass = null;//组件选中样式
      this.isDetailInfo = false;
      this.isRight = false;
      this.isFloorInfo = true;
    },
    // 删除楼层
    deleteFloorItem(items, index) {
      if (items.id) {
        this.waterfallList.splice(index, 1);
      } else {
        this.isDetailInfo = true;
        this.isFloorInfo = false;
        this.isRight = false;
        this.waterfallList.splice(index, 1);
      }
    },



    /*********** 右侧 *************/
    // 模板自定义截屏
    initScreenShort() {
      if (this.modelinfo.viewImg != "") {
        this.$message({ message: '已上传模板截图，若要重新上传请先删除！', type: 'error' });
      } else {
        const screenShotHandler = new ScreenShot({
          enableWebRtc: false, // 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
          completeCallback: this.callback, //确认的回调函数
          closeCallback: this.closeFn, // 截图关闭回调函数
          level: 11, //截图的层级
          loadCrossImg: true, //允许图片跨域
        });
      }
    },
    //截图确认按钮回调函数
    callback(base64data) {
      // 截图路径 base64
      // console.log('图片路径：',base64data);
      requestModel({ img: base64data }, 'screenshot').then(res => {
        let { result_code, result_msg, data } = res;
        if (result_code == 0) {
          this.modelinfo.viewImg = data;
          this.$message({ message: '截图成功', type: 'success' });
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    closeFn(e) {
      console.log(e);
    },

  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.createPage {
  width: 100%;
  height: 100%;

  // 顶部按钮
  .topBtn {
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  // 操作区域
  .template {
    width: 100%;
    height: calc(100vh - 155px);
    margin-top: 15px;
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;

    // 左边小组件
    .left {
      width: 260px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;

      .widgetList {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .modelItem {
          font-size: 14px;
          color: #666;
          padding: 5px;
          margin: 7px;
          border-radius: 6px;
          position: relative;
          cursor: move;

          .itemBox {
            width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }

          &:hover {
            border: 1px dashed #3089fd;
            color: #3089fd;
            background-color: #e5f0fe;
          }
        }

        .noModelList {
          width: 100%;
          text-align: center;
          margin-top: 50px;
          color: #cdcdcd;
        }
      }
    }

    // 中间面板
    .center {
      width: calc(100% - 700px);
      height: 100%;
      margin: 0 20px;
      box-shadow: 0px 2px 8px 0px #ccc;
      position: relative;

      .navInfo {
        width: 100%;
        height: 42px;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        transition: all .3s;
        padding: 10px 20px;
        border-bottom: 1px solid #cdcdcd;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 16px;
        }
      }

      .panle {
        margin-top: 42px;
        height: calc(100% - 42px);
        background: linear-gradient(-90deg, rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
        padding: 10px 15px;
        display: flex;
        justify-content: center;
        overflow-y: auto;
        overflow-x: hidden;

        .view {
          width: 860px;
          height: 100%;

          // 楼层
          .item {
            position: relative;
            margin-top: 10px;

            &:nth-child(1) {
              margin-top: 0;
            }

            &:hover {
              width: 860px;
              transition: all .2s;
              transform: scale(0.99);
              border-radius: 2px;
              box-shadow: 0 0 3px #afafaf;
              background-color: rgba(229, 240, 254, 0.2);

              .el-icon-error {
                display: block;
              }
            }

            .el-icon-error {
              position: absolute;
              right: -10px;
              top: -6px;
              color: red;
              font-size: 25px;
              cursor: pointer;
              display: none;
              z-index: 9999;
            }
          }
        }
      }

      // 模板点击时的样式
      .border {
        border: 2px dashed blue !important;
      }

      .comBorder {
        border: 2px dashed red !important;
      }

      // 楼层删除时的样式
      .maskIndex {
        position: absolute;
        width: 100%;
        background-color: red;
        opacity: 0.4;
        z-index: 9;
      }

      .tips {
        position: absolute;
        width: 100%;
        color: red;
        font-size: 30px;
        z-index: 99;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          .bgTip {
            background-color: #ffffff;
          }
        }

        .bgTip {
          padding: 0 5px;
          border-radius: 4px;
        }
      }
    }

    // 右边属性
    .right {
      width: 410px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
    }
  }
}
</style>